window.onload = function () {
    console.log('引入了js_______________________');


    //购物车下拉框
    var shopcart = document.querySelector('.shopcart');
    var message = document.querySelector('.message');

    shopcart.addEventListener('mouseenter', function () {
        animate(message, 0, 1);
        message.style.boxShadow = '0 2px 5px 2px rgba(142, 144, 142, 0.3)';
    });
    shopcart.addEventListener('mouseleave', function () {
        animate(message, -100, 1);
        message.style.boxShadow = 'none';
    });



    //头部下拉框开始
    var nav = document.querySelector('.nav');
    var lis = nav.querySelectorAll('li');

    var navlist = document.querySelector('.navlist');
    var lis2 = navlist.querySelectorAll('li');

    var dropdown = document.querySelector('.dropdown');
    var container = document.querySelector('.container');
    //鼠标进入ul导航栏出现下拉框
    nav.addEventListener('mouseenter', function () {
        container.style.display = 'block';
        container.style.zIndex = '2';
        animate(dropdown, 0, 10);
        dropdown.style.boxShadow = '0 3px 8px 2px rgba(142, 144, 142, 0.3)';
        dropdown.style.border = ' 2px solid #e0e0e0';
        dropdown.style.backgroundColor = '#fff';
    });
    //鼠标离开
    nav.addEventListener('mouseleave', function () {
        animate(dropdown, -230, 10, function () {
            container.style.zIndex = '-1';
        });
        dropdown.style.boxShadow = 'none';
        dropdown.style.border = 'none';
        dropdown.style.backgroundColor = 'none';

    });


    //给navlist中的每一个小li对应的索引值
    // console.log(lis2);
    for (let k = 0; k < lis2.length; k++) {
        lis2[k].setAttribute('index', k);
    }
    //给每一个导航栏中的小li绑定鼠标经过事件
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function () {
            var index = lis2[i].getAttribute('index');
            if (index == i) {
                // console.log('true');
                for (let j = 0; j < lis2.length; j++) {
                    lis2[j].style.display = 'none';
                }
                lis2[i].style.display = 'block'
            }
        })
    };




    //banner模块对应的侧边栏asidelist可选框操作

    //注意：处理鼠标移出侧边栏的功能，此时详细item旁边的对应侧边栏会保持高亮,鼠标只有完全移出侧边栏或者详情栏才会让详情框消失

    //首先获取侧边栏aside选线
    var asideTitle = document.querySelector('.asideTitle');
    var titles = asideTitle.querySelectorAll('li');
    //获取每个选项对应显示框
    var togglearea = document.querySelector('.togglearea');
    var toggleitems = togglearea.querySelectorAll('.toggleitem');

    for (let i = 0; i < toggleitems.length; i++) {
        //给每一个title选项绑定一个自定义索引值
        titles[i].setAttribute('titleindex', i);
        //给每一个toggleitems的小li绑定自定义索引值
        toggleitems[i].setAttribute('itemindex', i);

        //给toggleitems中的每一个小li绑定鼠标移入移出事件
        toggleitems[i].addEventListener('mouseenter', function () {
            //获取对应的titleitem的自定义索引值
            var titleitemindex = titles[i].getAttribute('titleindex');
            if (titleitemindex == i) {
                this.style.display = 'block';
                titles[i].style.backgroundColor = '#FF6A00';
            }
        })
        toggleitems[i].addEventListener('mouseleave', function () {
            //获取对应的titleitem的自定义索引值
            var titleitemindex = titles[i].getAttribute('titleindex');
            if (titleitemindex == i) {
                this.style.display = 'none';
                titles[i].style.backgroundColor = '';
            }
        })
    };

    for (let i = 0; i < titles.length; i++) {
        //给每一个asideTitle导航栏中的小li绑定鼠标进入事件
        titles[i].addEventListener('mouseenter', function () {
            this.style.backgroundColor = '#FF6A00';
            //获取对应的toggleitem的自定义索引值
            var toggleitemindex = toggleitems[i].getAttribute('itemindex');
            if (toggleitemindex == i) {
                for (let i = 0; i < toggleitems.length; i++) {
                    toggleitems[i].style.display = 'none';
                }
                toggleitems[i].style.display = 'block';
            }
        })
        //给每一个title选项绑定鼠标离开事件
        titles[i].addEventListener('mouseleave', function (event) {
            this.style.backgroundColor = '';
            //获取对应的toggleitem的自定义索引值
            var toggleitemindex = toggleitems[i].getAttribute('itemindex');
            // console.log(event);
            if (event.layerX < 0 || event.layerY < 0 || event.layerY >= 42) {
                if (toggleitemindex == i) {
                    toggleitems[i].style.display = 'none';
                }
            }

        })
    };
    //banner侧边栏结束






    //轮播图功能开始
    var swiperarea = document.querySelector('.swiperarea');
    var banner = document.querySelector('.banner');

    var lbutton = document.querySelector('.lbutton');
    var rbutton = document.querySelector('.rbutton');


    //这里定义一个num的值来判断点击的次数 初始为0
    var num = 0;
    var circle = 0;
    //设置节流阀控制轮播图的快速点击限制
    var flag = true;

    //1.首先动态创建小圆点
    var swiperpoint = document.querySelector('.swiperpoint');
    //获取到每张图片的宽度值
    var width = swiperarea.children[0].offsetWidth;

    for (let i = 0; i < swiperarea.children.length; i++) {

        var li = document.createElement('li');
        li.setAttribute('index', i);
        swiperpoint.appendChild(li);

        li.addEventListener('click', function () {
            if (flag) {
                flag = false;
                for (let i = 0; i < swiperpoint.children.length; i++) {
                    swiperpoint.children[i].className = ''
                }
                this.className = 'current';

                var index = this.getAttribute('index');
                // 当我们点击了某个小li 就要把这个li 的索引号给 num  
                num = index;
                // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
                circle = index;
                swiperanimate(swiperarea, -index * width, function () {
                    flag = true
                });
            }

        })

    }
    //在创建小圆点之后把第一个图片(li)复制一份放到ul的最后，这样可以实现流畅切换,并且避免小圆点个数不一致的问题
    var li = swiperarea.children[0].cloneNode(true);
    swiperarea.appendChild(li);

    //3.给第一个小圆点添加一个类名
    swiperpoint.children[0].className = 'current';

    //7.实现点击右边的按钮切换图片的 功能

    rbutton.addEventListener('click', function () {
        if (flag) {

            //先将节流阀取反
            flag = false;

            //点击首先需要做一个判断如果此时
            if (num == swiperarea.children.length - 1) {
                //重置num的值
                num = 0;
                //让ul快速返回最开始的位置
                swiperarea.style.left = 0;
            }
            //首先num要加一
            num++;
            //同样是移动ul  调用动画函数
            swiperanimate(swiperarea, -num * width, function () {
                flag = true;
            });
            //8.让小圆圈跟随点击变化
            //可以设置一个circle变量来控制小圆圈的变化 每点击一次小圆点加1
            circle++;
            //还是排他思想
            //判断如果circle的值
            if (circle == swiperpoint.children.length) {
                circle = 0; //复原
            }
            for (var i = 0; i < swiperpoint.children.length; i++) {
                swiperpoint.children[i].className = '';
            }
            swiperpoint.children[circle].className = 'current';
        }

    })


    lbutton.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //点击首先需要做一个判断如果此时
            if (num == 0) {
                //重置num的值
                num = swiperarea.children.length - 1;
                //让ul快速返回最开始的位置
                swiperarea.style.left = -num * width + 'px';
            }
            //首先num要加一
            num--;
            //同样是移动ul  调用动画函数
            swiperanimate(swiperarea, -num * width, function () {
                flag = true;
            });

            circle--;
            //还是排他思想
            //判断如果circle的值
            if (circle < 0) {
                circle = swiperpoint.children.length - 1; //复原
            }
            //还是排他
            for (var i = 0; i < swiperpoint.children.length; i++) {
                swiperpoint.children[i].className = '';
            }
            swiperpoint.children[circle].className = 'current';
        }

    })

    //轮播图自动播放功能
    var swipertimer = setInterval(() => {
        rbutton.click();
    }, 5000);
    //鼠标进入暂停,鼠标离开再自动播放
    banner.addEventListener('mouseenter', function () {
        clearInterval(swipertimer);
        swipertimer = null;
    })
    banner.addEventListener('mouseleave', function () {
        swipertimer = setInterval(() => {
            rbutton.click();
        }, 5000);
    })
    //轮播图结束





    //floor的tab栏 热门 和其他等选项的切换

    //获取所有  类名相同 导航栏
    var floortopnavrights = document.querySelectorAll('.floortopnavright');
    //通过循环判断 如果导航栏有多个 这时才需要去做切换功能 再去获取每一个导航按钮对应的tab栏
    for (let i = 0; i < floortopnavrights.length; i++) {
        if (floortopnavrights[i].children.length > 1) {

            //注意:这里获取对应选项节点必须采用父子节点的方式一层层找到对应的选项节点，因为floor里面的类名都是相同的，直接选取无法保证是选到的对应元素
            //这样一层层通过相对父子兄关系的查找才不会出错
            //注意:这几个变量一定要用let声明 如果用var在循环之后已经不是当前获取的节点了,而是最后一次循环获取到的对应的节点,这样就会出错
            let parent = floortopnavrights[i].parentNode;
            let brother = parent.nextElementSibling;
            let floortopitemright = brother.children[1];

            //绑定自定义索引值
            for (let i = 0; i < floortopitemright.children.length; i++) {
                floortopitemright.children[i].setAttribute('index', i);
            }


            //绑定导航栏切换事件  通过排他思想
            let floortopnavrightitems = floortopnavrights[i].querySelectorAll('span');
            for (let i = 0; i < floortopnavrightitems.length; i++) {
                floortopnavrightitems[i].addEventListener('mouseenter', function () {
                    //第一个排他思想用于给导航标签循环绑定高亮样式
                    for (let i = 0; i < floortopnavrightitems.length; i++) {
                        floortopnavrightitems[i].style.color = '#424242';
                        floortopnavrightitems[i].style.borderBottom = 'none';
                    }
                    this.style.color = '#FF6A00';
                    this.style.borderBottom = '2px solid #FF6A00';
                    if (floortopitemright.children[i].getAttribute('index') == i) {
                        //第二个排他思想用于切换tab栏
                        for (let i = 0; i < floortopitemright.children.length; i++) {
                            floortopitemright.children[i].style.display = 'none';
                        }
                        floortopitemright.children[i].style.display = 'block';
                    }
                })
            }
        }
    }



    //侧边栏的效果

    var asidenavbarlist = document.querySelector('.asidenavbarlist');
    var asidenavbarlistitems = asidenavbarlist.querySelectorAll('li');
    console.log(asidenavbarlistitems);
    var l = asidenavbarlistitems.length;
    document.addEventListener('scroll', function () {
        if (window.pageYOffset >= 1120) {
            asidenavbarlistitems[l - 1].style.display = 'block';
        } else {
            asidenavbarlistitems[l - 1].style.display = 'none';
        }
    })


    //侧边栏手机APP鼠标进入效果
    var erweimatoggle = document.querySelector('.erweimatoggle');
    var erweima = document.querySelector('.erweima');

    erweimatoggle.addEventListener('mouseenter', function () {
        //固定定位或者祖先元素为display:none的元素获取offsetTop为0
        // console.log(erweima.style.top);

        clearTimeout(timererweima2);
        timererweima2 = null;

        if (asidenavbarlistitems[l - 1].style.display == 'block') {
            erweima.style.display = "block";
            erweima.style.top = '315px';
        } else {
            erweima.style.display = "block";
            erweima.style.top = '425px';
        }
    })
    var timererweima;
    var timererweima2;
    erweimatoggle.addEventListener('mouseleave', function () {
        timererweima = setTimeout(() => {
            erweima.style.display = "none";
        }, 150)
    })
    erweima.addEventListener('mouseenter', function () {
        clearTimeout(timererweima);
        timererweima = null;
        this.style.display = 'block'
    })
    erweima.addEventListener('mouseleave', function () {
        timererweima2 = setTimeout(() => {
            erweima.style.display = "none";
        }, 150)
    })



    //最下面小图片切换功能 两个li切换显示
    var toggleimg1 = document.querySelector('.toggleimg1');
    var toggleimg2 = document.querySelector('.toggleimg2');
    toggleimg1.style.display = 'block';
    toggleimg2.style.display = 'none';
    var toggleflag = true;
    setInterval(() => {
        if (toggleflag) {
            toggleimg1.style.display = 'block';
            toggleimg2.style.display = 'none';
            toggleflag = false;
        } else {
            toggleimg1.style.display = 'none';
            toggleimg2.style.display = 'block';
            toggleflag = true;
        }
    }, 3000)

}
